<template>
    <div class="dormitory-repair" ref="building">
        <el-form :inline="true" size="mini" :model="searchForm">
            <el-form-item label="维修状态">
                <el-select v-model="searchForm.status" placeholder="请选择维修状态">
                    <el-option value = "0" label="待维修"></el-option>
                    <el-option value = "1" label="完成维修"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input placeholder="请输入姓名" v-model="searchForm.name"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input placeholder="请输入联系方式" v-model="searchForm.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleRefresh">刷新</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                stripe
                default-expand-all
                size="mini">
            <el-table-column
                    prop="code"
                    label="维修单号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="报修人"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="room.name"
                    label="故障位置"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="故障信息"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="故障分类"
                    width="100">
                <template slot-scope="scope">
                    <span v-if="properties != null" v-for="(item,index) in scope.row.properties">
                        <span>{{item.name}} </span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="60">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == '1'" type="success" size="mini">已维修</el-tag>
                    <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">故障</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    header-align="left"
                    align="center"
                    prop="sort"
                    label="排序"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="gmtCreate"
                    label="创建时间"
                    width="140">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="comingTime"
                    label="预约时间"
                    width="140">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            plain
                            @click="handleEdit(scope.$index, scope.row)">完成维修
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination
                :parent-method="listRepair"
                :pagination="this.$store.state.Navigation.pagination">
        </dormitory-pagination>
    </div>
</template>

<script>

    import PageSizeUtils from "../../../utils/PageSizeUtils";
    import DormitoryPagination from "../components/DormitoryPagination";
    import {listRepair, deleteRepair, saveRepair, selectRepair, updateStatus} from "../../../api/repair/repair";
    import {listBuilding,} from "../../../api/manage/building";
    import {listRoomByBuildingId} from "../../../api/manage/room";
    import {listDictItemByDictCode} from "../../../api/platform/dictItem";

    export default {
        name: "Repair",
        components: {DormitoryPagination},
        data() {
            return {
                tableData: [],
                repairForm: {
                    name: "",
                    roomId: "",
                    phone: "",
                    propertyIds: [],
                    content: "",
                    comingTime: "",
                },
                buildingRooms: [],
                properties: [],
                searchForm: {
                    status: "",
                    name: "",
                    phone: "",
                },
            };
        },
        methods: {
            listRepair(current, size) {
                listRepair(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.repairs.records;
                    PageSizeUtils.setPagination(response.data.repairs)
                }).catch(error => {
                    console.log(error)
                })
            },
            listBuildingRoom() {
                this.buildingRooms = [];
                listBuilding().then(response => {
                    let buildingList = new Array();
                    buildingList = response.data.buildings.records;
                    for (let index in buildingList) {
                        listRoomByBuildingId(buildingList[index].ukId).then(response => {
                            let roomList = new Array();
                            roomList = response.data.rooms;
                            let rooms = new Array();
                            for (let i in roomList) {
                                rooms.push({
                                    label: roomList[i].name,
                                    value: roomList[i].ukId,
                                })
                            }
                            this.buildingRooms.push({
                                label: buildingList[index].name,
                                value: buildingList[index].ukId,
                                children: rooms,
                            })
                        })
                    }
                })
            },
            listProperty() {
                this.properties = [];
                listDictItemByDictCode("SAIS_PROPERTY").then(response => {
                    this.properties = response.data.dictItems
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
            },
            handleEdit(index, row) {
                this.isUpdate = true
                updateStatus(row.ukId).then(response => {
                    this.listRepair(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                }).catch(error => {
                    console.log(error)
                })
            },
            handleDelete(index, row) {
                deleteRepair(row.ukId).then(response => {
                    this.listRepair(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                this.listRepair(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleRefresh() {
                this.listRepair(this.$store.state.Navigation.pagination.current,
                    this.$store.state.Navigation.pagination.size);
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
                this.repairForm.roomId = this.repairForm.roomId[this.repairForm.roomId.length - 1]
                saveRepair(this.repairForm).then(response => {
                    this.listRepair(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                    this.dialogFormVisible = false;
                }).catch(error => {
                    console.log(error)
                })
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },
        },
        created() {
            PageSizeUtils.setPagination({})
            this.listRepair(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size)
        },
    }
</script>

<style scoped>
    .dormitory-repair {
        background-color: #ffffff;
        border: #ffffff 3px solid;
    }
</style>
